<template>
  <div class="dt-warp">
    <!-- header 开始 -->
    <div class="dt-header">
      <router-link to="/gallry">
        <img src="//img1.qunarzz.com/sight/p0/1712/16/16dd785ae3e2447ba3.img.jpg_600x330_38a5c69c.jpg" />
      </router-link>
      <div class="dt-hd-hd">
        <span class="dt-hd-hd-back-btn iconfont" @click="dtHandleBack">&#xe66a;</span>
      </div>
      <span class="dt-back-btn iconfont" @click="dtHandleBack">&#xe66a;</span>
      <div class="dt-hd-img-num">
        <span class="iconfont">&#xe602;</span>
        <span>12</span>
      </div>
      <span class="dt-hd-desc">故宫（AAAAA景区）</span>

    </div>
    <!-- header 结束 -->
    <!-- content 开始 -->
    <div class="dt-content">
      <div class="dt-content-info">
        <div class="dt-content-info-left">
          <div class="info-left-top">
            <span class="info-score">5.0</span>
            <span>分</span>
            <span class="info-score-unit">超赞</span>
          </div>
          <div class="info-left-bottom">
            <span class="recommand-num">1234567条评论</span>
            <span class="iconfont">&#xe630;</span>
          </div>
        </div>
        <div class="dt-content-info-right">
          <div class="info-left-top">
            <span class="info-score">景点介绍</span>
          </div>
          <div class="info-left-bottom">
            <span class="recommand-num">开放时间、贴士</span>
            <span class="iconfont">&#xe630;</span>
          </div>
        </div>
      </div>
      <div class="info-address">
        <router-link to="">
          <span class="toleft iconfont">&#xe618;</span>
          <span class="address-text">北京市东城区景山倩姐4号</span>
          <span class="toright iconfont">&#xe630;</span>
        </router-link>
      </div>
    </div>
    <!-- content 结束 -->
  </div>
</template>

<script>
  export default {
    name: 'Detail',
    methods: {
      dtHandleBack: function() {
        this.$router.back();
      },
      getScroll: function() {
        if (window.pageXOffset) {
          return {
            top: window.pageYOffset,
            left: window.pageXOffset
          }
        } else {
          return {
            top: document.body.scrollTop + document.documentElement.scrollTop,
            left: document.body.scrollLeft + document.documentElement.scrollLeft
          }
        }
      },
      showHeader: function() {
        var _this = this,
          oHeader = document.querySelector('.dt-hd-hd'),
          oDetailBackBtn = document.querySelector('.dt-back-btn'),
          oHeaderHeight = parseInt(window.getComputedStyle(oHeader).height);
        document.addEventListener('scroll', function(e) {
          var scrollHeight = _this.getScroll().top,
            opcityVal = 0;
          if (scrollHeight > 0) {
            if (scrollHeight / oHeaderHeight > 1) {
              opcityVal = 1;
            } else {
              opcityVal = scrollHeight / oHeaderHeight;
            }

            oDetailBackBtn.style.opacity = 0;

            oHeader.style.opacity = opcityVal;
          }

          if (scrollHeight < 1) {
            oHeader.style.opacity = 0;
            oDetailBackBtn.style.opacity = 1;
          }

        }, false);
      }
    },
    mounted() {
      this.showHeader(); //显示隐藏header 和返回按钮
    }
  }
</script>

<style scoped="scoped">
  img {
    width: 100%;
    height: 100%;
  }

  .dt-warp {
    width: 100%;
    height: 1200px;
  }

  .dt-warp .dt-header {
    position: relative;
    height: 4.125rem;
  }

  .dt-warp .dt-header img {
    position: absolute;
    top: 0;
    left: 0;
  }

  .dt-warp .dt-header .dt-hd-hd {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: .88rem;
    background-color: #00BCD4;
    opacity: 0;
    z-index: 999;
  }

  .dt-warp .dt-header .dt-hd-hd .dt-hd-hd-back-btn {
    position: absolute;
    left: 10px;
    top: 5px;
    width: .72rem;
    height: .72rem;
    color: #FFFFFF;
    line-height: .72rem;
    z-index: 999;
  }

  .dt-back-btn {
    position: absolute;
    left: 10px;
    top: 5px;
    width: .72rem;
    height: .72rem;
    background-color: #00000090;
    color: #FFFFFF;
    line-height: .72rem;
    border-radius: 50%;
  }

  .dt-warp .dt-header .dt-hd-img-num {
    display: inline-block;
    position: absolute;
    left: 10px;
    bottom: .7rem;
    padding: .1rem .3rem;
    border-radius: .06rem;
    background-color: #00000090;
    color: #FFFFFF;
    font-size: .24rem;
    line-height: .24rem;
  }

  .dt-warp .dt-header .dt-hd-desc {
    position: absolute;
    left: 10px;
    bottom: .3rem;
    font-size: .36rem;
    font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;
    text-shadow: 0 1px 2px rgb(0 0 0 / 70%);
    color: #FFFFFF;
  }

  .dt-warp .dt-content {
    position: relative;
    top: -.1rem;
    width: 100%;
    border-top-left-radius: .15rem;
    border-top-right-radius: .15rem;
    background-color: #FFFFFF;
    overflow: hidden;
    box-shadow: -.5rem -.5rem 5px #00000050;
  }

  .dt-content .dt-content-info {
    display: flex;
    flex-direction: row;
  }

  .dt-content .dt-content-info .dt-content-info-left {
    flex: 1;
    width: 100%;
  }

  .dt-content .dt-content-info .dt-content-info-left .info-left-top {
    text-align: left;
    padding: .3rem .2rem 0 .4rem;
  }

  .dt-content .dt-content-info .dt-content-info-left .info-left-top span {
    color: orange;
  }

  .dt-content .dt-content-info .dt-content-info-left .info-left-top .info-score {
    font-size: .36rem;
  }

  .dt-content .dt-content-info .dt-content-info-left .info-left-bottom {
    position: relative;
    display: flex;
    flex-direction: row;
    padding: .1rem .2rem 0 .4rem;
  }

  .dt-content .dt-content-info .dt-content-info-left .info-left-bottom span {
    font-size: .2rem;
    color: #9e9e9e;
  }

  .dt-content .dt-content-info .dt-content-info-left .info-left-bottom .iconfont {
    position: absolute;
    right: 0;
    top: -.2rem;
  }


  .dt-content .dt-content-info .dt-content-info-right {
    flex: 1;
    width: 100%;
  }

  .dt-content .dt-content-info .dt-content-info-right .info-left-top {
    text-align: left;
    padding: .3rem .2rem 0 .4rem;
  }

  .dt-content .dt-content-info .dt-content-info-right .info-left-bottom {
    position: relative;
    display: flex;
    flex-direction: row;
    padding: .1rem .2rem 0 .4rem;
  }

  .dt-content .dt-content-info .dt-content-info-right .info-left-bottom span {
    font-size: .2rem;
    color: #9e9e9e;
  }

  .dt-content .dt-content-info .dt-content-info-right .info-left-bottom .iconfont {
    position: absolute;
    right: 0;
    top: -.2rem;
  }

  .dt-content .info-address {
    position: relative;
    padding: .3rem .2rem 0 .4rem;
    text-align: left;
  }

  .dt-content .info-address span {
    color: #9e9e9e;
  }

  .dt-content .info-address .address-text {
    color: #000000;
  }

  .dt-content .info-address .toright {
    position: absolute;
    right: 0;
  }
</style>
